<script setup>
import {onBeforeMount, reactive, ref} from "vue";
import SlickCarousel from "@/components/SlickCarousel.vue";
import {getAllArrangements, getAllResourcesByType, getLateSixFriendsNews} from "@/api/home";
import {ElMessage} from "element-plus";
import {SUCCESS} from "@/core/constants/HttpStatus";
import {useRouter} from "vue-router";

const router = useRouter();
// 赛事安排
const arrangementList = ref([]);
// 资源学习
const resources = reactive([
  {
    label: "书籍推荐",
    name: "book",
    source: []
  },
  {
    label: "网络资源",
    name: "website",
    source: []
  }
])
const activeName = ref("book");
// 系友风采
const friendList = ref([]);
// 获取页面基本数据
const fetchAllData = async () => {
  try {
    // 赛事安排
    let res = await getAllArrangements();
    if (res.data.code != SUCCESS) {
      throw new Error(res.data.msg);
    }
    // 系友风采
    let res2 = await getLateSixFriendsNews();
    if (res2.data.code != SUCCESS) {
      throw new Error(res2.data.msg);
    }
    console.log(res2)
    // 书籍推荐
    let res3 = await getAllResourcesByType(0);
    if (res3.data.code != SUCCESS) {
      throw new Error(res3.data.msg);
    }
    // 网络资源
    let res4 = await getAllResourcesByType(1);
    if (res4.data.code != SUCCESS) {
      throw new Error(res4.data.msg);
    }
    arrangementList.value = res.data.data || [];
    friendList.value = res2.data.data || [];
    resources[0].source = res3.data.data || [];
    resources[1].source = res4.data.data || [];
  } catch (e) {
    ElMessage.error(e?.message || "数据获取异常");
  }
}
const goOutSite = (url) => {
  window.location.href = url;
}
onBeforeMount(async () => {
  await fetchAllData();
})
</script>

<template>
  <div>
    <div class="topImg">
      <div class="top-content">
        <h2 class="title">信息工程系专业介绍</h2>
        <div class="text">
          信息工程系包含信息管理与信息系统、大数据管理与应用两个专业。
        </div>
        <div class="text">
          信息管理与信息系统秉承信息技术与管理融合原则，强化数据分析与决策能力，为广东省乃至泛珠三角地区培养掌握人工智能、大数据时代信息组织运作规律、应用信息技术提升组织运作效率、具有创新思维的应用型人才。
        </div>
        <div class="text">
          大数据管理与应用专业主要融合管理学、统计学、计算机科学与技术、以及其他具体实践领域的学科知识，为农业、工商业、企业及政府部门等应用领域，培养大数据分析、大数据治理和辅助管理决策的复合创新应用型人才。
        </div>
      </div>
    </div>
    <div class="wrapper">
      <div class="section-1">
        <div class="recent-race">
          <div class="top-tag">
            <i class="calendar icon"></i>
            <span class="title">近日赛程</span>
          </div>
          <div class="content">
            <el-scrollbar height="320px">
              <el-timeline>
                <el-timeline-item
                    v-for="item in arrangementList"
                    :key="item.id"
                    :timestamp="item.startMonth"
                    placement="top"
                >
                  <el-card>
                    <h4>{{ item.name }}</h4>
                    <p>申请时间：{{ item.applyBegin }} - {{ item.applyEnd }}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-scrollbar>
          </div>
        </div>
        <div class="nav-grid">
          <h3 class="title"><i class="discuss icon"></i>论坛探讨</h3>
          <div class="grid-body">
            <div class="grid-item" @click="router.push('/salon/forum/idea')">
              <div class="img">
                <el-image
                    :src="require('@/assets/images/creative-icon.png')"
                ></el-image>
              </div>
              <div class="text">创意空间</div>
            </div>
            <div class="grid-item" @click="router.push('/salon/forum/team')">
              <div class="img">
                <el-image
                    :src="require('@/assets/images/teamUp-icon.png')"
                ></el-image>
              </div>
              <div class="text">学生组队</div>
            </div>

            <div class="grid-item" @click="router.push('/salon/forum/chat')">
              <div class="img">
                <el-image
                    :src="require('@/assets/images/chat-icon.png')"
                ></el-image>
              </div>
              <div class="text">畅聊天地</div>
            </div>
            <div class="grid-item">
              <div class="other-text">···</div>
            </div>
          </div>
        </div>
      </div>
      <div class="section-2">
        <div class="title-header">
          <div class="rect"></div>
          <div class="text">
            <h3 class="zh">资源学习</h3>
            <h3 class="en">Resource</h3>
          </div>
        </div>
        <div class="content">
          <el-tabs v-model="activeName">
            <el-tab-pane
                :lazy="true"
                v-for="resource in resources"
                :key="resource.name"
                :label="resource.label"
                :name="resource.name"
            >
              <template v-if="resource.source.length > 5">
                <SlickCarousel>
                  <div
                      v-for="item in resource.source"
                      :key="item.lrId"
                      @click="resource.name === 'website' && goOutSite(item.lrWebsiteUrl)"
                  >
                    <div class="book-item">
                      <div class="img-box">
                        <el-image :src="item.lrImageUrl" v-if="item.lrImageUrl"/>
                        <el-image src="" v-else/>
                      </div>
                      <div class="text">
                        <span>{{ item.lrName }}</span>
                      </div>
                    </div>
                  </div>
                </SlickCarousel>
              </template>
              <template v-else-if="resource.source.length > 0">
                <div class="book-wrapper">
                  <div
                      v-for="item in resource.source"
                      :key="item.lrId"
                      @click="resource.name === 'website' && goOutSite(item.lrWebsiteUrl)"
                  >
                    <div class="book-item">
                      <div class="img-box">
                        <el-image :src="item.lrImageUrl" v-if="item.lrImageUrl"/>
                        <el-image src="" v-else/>
                      </div>
                      <div class="text">
                        <span>{{ item.lrName }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="empty">
                  <el-empty description="暂无资源"/>
                </div>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="section-3">
        <div class="title-header">
          <div class="rect"></div>
          <div class="text">
            <h3 class="zh">系友风采</h3>
            <h3 class="en">Friend of Department</h3>
          </div>
        </div>
        <div class="content">
          <ul class="show-friends">
            <li v-for="(item,idx) in friendList" :key="item.id">
              <div class="newFriend" v-if="idx === 0">
                <!--                Cake: 函数-->
                <img :src="require(item.imageUrl)" v-if="item.imageUrl"/>
                <img src="@/assets/images/home_school.png" v-else/>
                <div class="right-friend-news">
                  <p>最新新闻：</p>
                  <p>
                    <a href="javascript:;" @click="router.push('/news/detail/'+item.id)">{{ friendList[0].title }}</a>
                  </p>
                  <p><a href="javascript:;" @click="router.push('/news/detail/'+item.id)" style="color: #188fff;">[ 查看详情
                    ]</a></p>
                </div>
                <div class="friend-news-time">
                  [{{ friendList[0].releaseTime }}]

                </div>
              </div>
              <div class="friend-bottom" v-else>
                <span></span>
                <span>[{{ item.releaseUrealname }}]</span>
                <span><a href="#">{{ item.title }}</a></span>
                <span>[{{ item.releaseTime }}]</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- <div class="section-3">
        <div class="title-header">
          <div class="rect"></div>
          <div class="text">
            <h3 class="zh">新闻广播</h3>
            <h3 class="en">News</h3>
          </div>
        </div>
        <div class="content">
          <div class="notice-list">
            <div class="notice-item" v-for="i in 6" :key="i">
              <div class="title">宣讲会通知</div>
              <div class="notice-message">我系将邀请xx企业的hr来为同学们进行就业方面的相关讲座，请有兴趣的同学积极参加</div>
              <div class="timeAndPlace">
                <i class="icon letter"></i>
                <div class="text">
                  <div class="time">时间：2023.06.01</div>
                  <div class="place">地点：3212</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section-4">
        <div class="title-header">
          <div class="rect"></div>
          <div class="text">
            <h3 class="zh">教师风采</h3>
            <h3 class="en">About Teacher</h3>
          </div>
        </div>
        <div class="content">
          <div class="card" v-for="i in 5" :key="i">
            <el-avatar :src="require('@/assets/images/avatar.png')" size="large"></el-avatar>
            <div class="name">
              <span class="text">张三</span>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<style scoped lang="less">
.empty {
  height: 260px;
}

.title-header {
  position: relative;
  padding-left: 20px;
  height: 60px;
  margin-bottom: 40px;

  .rect {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 60px;
    background-color: #099891;
  }

  .text {
    display: inline-block;
    line-height: 30px;

    .zh {
      font-size: 22px;
    }

    .en {
      font-weight: 300;
    }
  }
}

.icon {
  display: inline-block;
  width: 32px;
  height: 32px;

  &.calendar {
    background: url("@/assets/images/calendar-icon.png") no-repeat center;
    background-size: contain;
  }

  &.discuss {
    background: url("@/assets/images/discuss-icon.png") no-repeat center;
    background-size: contain;
  }

  &.letter {
    background: url("@/assets/images/letter-icon.png") no-repeat center;
    background-size: contain;
  }
}

.topImg {
  background: url("@/assets/images/home_background.jpg") no-repeat center;
  background-size: cover;
  //width: 1400px;
  height: 700px;
  margin: 50px;
  overflow: hidden;

  .top-content {
    float: left;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    width: 48%;
    height: 500px;
    margin: 100px 25px 0 0;
    padding: 10px 40px 90px;
    box-sizing: border-box;

    .title {
      font-size: 32px;
      line-height: 48px;
    }

    .text {
      text-indent: 2em;
      white-space: pre-line;
      line-height: 2;
      font-size: 18px;
    }
  }
}

.wrapper {
  width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

.section-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
}

.recent-race {
  box-sizing: border-box;
  position: relative;
  width: 600px;
  height: 400px;
  border-radius: 15px;
  border: 10px solid #ebf6ff;

  .top-tag {
    position: absolute;
    top: -16px;
    left: 5px;

    .icon {
      float: left;
    }

    .title {
      float: left;
      width: 100px;
      background-color: #f0ca00;
      color: white;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      line-height: 32px;
    }
  }

  .content {
    height: 100%;
    padding: 30px 15px;
    box-sizing: border-box;
  }
}

.nav-grid {
  //box-sizing: border-box;
  width: 500px;
  height: 400px;
  border: 1px solid black;
  border-collapse: collapse;

  .title {
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: black;
    border: 1px solid black;
    height: 80px;
    box-sizing: border-box;
  }
}

.grid-body {
  display: grid;
  grid-template-columns: repeat(2, 250px);
  grid-template-rows: 160px 160px;

  .grid-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    border-collapse: collapse;
    width: 250px;
    box-sizing: border-box;
    cursor: pointer;

    &:nth-child(n + 1) {
      background-color: #b0dce5;
    }

    &:nth-child(1),
    &:nth-child(4) {
      background-color: #dff1f5;
    }

    .img {
      width: 64px;
      height: 64px;
      line-height: 64px;
      padding: 6px;
      box-sizing: border-box;
      text-align: center;
    }

    .other-text {
      font-size: 50px;
      color: #8ad4e2
    }
  }
}

.scroller {
  position: relative;
  padding: 0 80px;
  overflow: hidden;

  // 轮播左右控件样式
  span[class$="ctrl"] {
    position: absolute;
    z-index: 999;
    top: 50%;
    margin-top: -50px;
    width: 30px;
    height: 60px;
    background-color: gray;
    color: #fff;
    line-height: 60px;
    font-size: 32px;
    cursor: pointer;
  }

  .l-ctrl {
    left: 0;
  }

  .r-ctrl {
    right: 0;
  }
}

.scrollbar {
  display: flex;
  flex-direction: row;
  width: 100%;

  // .scroll-item {
  //padding: 0 40px;
  // }
}

.section-2 {
  margin-top: 70px;
}

.section-2 .tabs {
  margin-top: 15px;
  //margin-left: 100px;
  margin-bottom: 0;

  .op2 {
    margin-left: 10px;
  }
}

.section-2 .content {
  margin-top: 30px;
  //height: 200px;
  //padding: 0 100px;

  .book-wrapper {
    display: flex;
    justify-content: space-around;
  }

  .book-item {
    width: 232px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 260px;

    .el-image {
      width: 130px;
      height: 190px;
      border: 1px solid black;
    }

    .text {
      overflow: hidden; /*超出部分隐藏*/
      white-space: nowrap; /*禁止换行*/
      text-overflow: ellipsis; /*省略号*/
      line-height: 40px;
      text-align: center;
      width: 232px;
    }
  }
}

.section-3 {
  margin: 40px 0;
  //border: 1px solid black;

  .content {
    padding: 0 80px;
  }
}

.section-3 .show-friends li {
  border-bottom: 1px solid black;

  .newFriend {
    display: flex;
    padding: 10px;

    img {
      width: 300px;
      height: 150px;
    }

    .right-friend-news {
      width: 70%;
      margin-left: 30px;
      padding: 10px;

      p > a {
        color: #000;
      }

      p:first-of-type {
        font-size: 25px;
        font-weight: 700;
      }

      p:nth-of-type(2) {
        margin-top: 20px;
        margin-bottom: 30px;
        font-size: 20px;

        a:hover {
          color: chocolate;
        }
      }

      p:nth-of-type(3) {
        font-weight: 700;

        a {
          color: #323292;
        }
      }
    }

    .friend-news-time {
      width: 10%;
      text-align: center;
      line-height: 150px;
      float: right;
    }
  }

  .friend-bottom {
    margin: 10px;
    font-size: 20px;

    span {
      margin-left: 10px;
      margin-right: 10px;

      a {
        color: #000;
      }

      a:hover {
        color: chocolate;
      }
    }

    span:first-of-type {
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      box-shadow: rgb(165, 163, 163) 0px 0px 2px 2px;
      background-color: rgb(62, 168, 229);
    }

    span:nth-of-type(2) {
      font-weight: 700;
    }

    span:nth-of-type(3) {
      width: 70%;
    }

    span:last-of-type {
      width: 10%;
      font-size: 16px;
      text-align: center;
      line-height: 25px;
      float: right;
    }
  }
}

// .section-3 .notice-list {
//   display: flex;
//   justify-content: space-between;
//   flex-wrap: wrap;
//   //gap: 100px;
//   .notice-item {
//     width: 320px;
//     padding: 15px 30px;
//     margin-bottom: 60px;
//     box-sizing: border-box;
//     border: 1px solid #c7ac00;
//     .title {
//       height: 40px;
//       line-height: 40px;
//       border-radius: 20px;
//       text-align: center;
//       font-size: 20px;
//       background-color: #ecd439;
//     }
//     .notice-message {
//       text-indent: 2em;
//       line-height: 1.5;
//       font-size: 14px;
//       margin: 15px 0;
//     }
//     .timeAndPlace {
//       display: flex;
//       align-items: center;
//       gap: 20px;
//       .text {
//         font-size: 14px;
//         //line-height: 2;
//       }
//     }
//   }
// }

// .section-4 {
//   margin-top: 80px;
// }
// .section-4 .content {
//   display: flex;
//   height: 200px;
//   justify-content: center;
//   align-items: center;
//   position: relative;
// }
// .section-4 .content .card {
//   /* border: 1px solid black; */
//   height: 130px;
//   width: 232px;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
// }

// .section-4 .content .card .el-image {
//   border: 1px solid black;
//   border-radius: 50%;
// }

// .section-4 .content .card .name {
//   text-align: center;
//   margin-top: 15px;
//   padding-bottom: 5px;
//   font-size: 20px;
//   width: 80px;
//   border-bottom: 2px solid #0ba4a1;
// }
</style>
